.root {
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--gray6);
  position: relative;
  line-height: 16px;
  background: var(--lowContrast);
  white-space: pre-wrap;
  box-shadow: rgb(0 0 0 / 10%) 0px 5px 30px -5px;

  @media (prefers-color-scheme: dark) {
    background: var(--grayA2);
  }

  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--grayA3);
    border-radius: 8px;
    position: absolute;
    top: 12px;
    right: 12px;
    color: var(--gray11);
    cursor: copy;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;

    &:hover {
      color: var(--gray12);
      background: var(--grayA4);
    }

    &:active {
      color: var(--gray12);
      background: var(--grayA5);
      transform: scale(0.96);
    }
  }
}

.shine {
  @media (prefers-color-scheme: dark) {
    background: linear-gradient(
      90deg,
      rgba(56, 189, 248, 0),
      var(--gray5) 20%,
      var(--gray9) 67.19%,
      rgba(236, 72, 153, 0)
    );
    height: 1px;
    position: absolute;
    top: -1px;
    width: 97%;
    z-index: -1;
  }
}

@media (max-width: 640px) {
  .root {
    :global(.token-line) {
      font-size: 11px !important;
    }
  }
}
